<template>
	<view class="wrapper">
		<div class="header bfff posf">
			<div class="date-box colum posr ml40 tCenter" :class="dayIndex==i?'active':''" v-for="(v,i) in date"
				:key="i" @click="setIndex(i)">
				<div class="f26" :class="dayIndex==i?'ctheme':''">{{v.week}}</div>
				<div class="f24 c666 mt10">{{v.timestr}}</div>
			</div>
			<div class="mb20 ">
				<view class="picker center">
					<picker class="flex1" mode="selector" range-key="cityName" :range="arealist" @change="initData">
						<div class="center ">
							<div class="mr5 fw5">区域选择：{{selectedValue}}</div>
							<u-icon name="arrow-down-fill" size="12"></u-icon>
						</div>
					</picker>
					<up-search @clear="search" @search="search" v-model="keyWords" :showAction="false"
						placeholder="请输入关键字搜索"></up-search>
				</view>
			</div>
		</div>
		<div class="main">
			<div class="bfff house bfff mb20 c999" v-for="(v,i) in list" :key="i" @click.stop="open(v)">
				<div class="align-end">
					<div class="flex1 nowrap f35 c333 fbold">{{v.cinemaName}}</div>
					<!-- <div class="ctheme">{{v.minPrice}}</div> -->
					<div class="ctheme"> </div>
				</div>
				<div class="mt10 mb15 center">
					<div class="flex1 nowrap">{{v.address}}</div>
					<div>{{v.distance}}km</div>
				</div>
				<!-- <div class="flex-start">
					<div class="tag f22 center mr20 center">3D 眼睛</div>
				</div> -->
			</div>
			<!-- 暂无更多 -->
			<u-empty v-if="list.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: [],
				dayIndex: 0,
				movieId: '',
				city: {
					name: '北京',
					id: 110100
				},
				pageNum: 1,
				pageSize: 10,
				list: [],
				name: '',
				loading: false,
				location: {
					longitude: 0,
					latitude: 0
				},
				userInfo: '',
				phone: '',

				arealist: [],
				selectedValue: '全部区域',
				keyWords: '',
				index: 0,
			}
		},
		onLoad(e) {
			this.name = e.name
			this.movieId = e.movieId
			let that = this
			uni.setNavigationBarTitle({
				title: that.name
			})

		},
		onReachBottom() {
			if (this.loading) {
				return
			}
			this.pageNum++
			this.getCinemasByMovieId()
		},
		onShow() {
			this.location = uni.getStorageSync('location')
			this.city = uni.getStorageSync('city')
			// this.getNowCity()
			this.userInfo = uni.getStorageSync('uInfo')
			if (this.userInfo) {
				this.phone = this.userInfo.phone
			}
			this.getAreas()
			this.getDate()
		},
		methods: {
			// 切换区域
			initData(e) {
				this.index = e.detail.value
				this.selectedValue = this.arealist[this.index].cityName

				this.search()
			},
			// 点击搜索
			search() {
				this.pageNum = 1
				this.list = []
				this.getCinemasByMovieId()
			},
			// 查询区
			getAreas() {
				let that = this
				this.selectedValue = '全部区域'
				this.$http('/api/getAreas', {
					cityCode: this.city.id
				}).then((r) => {
					this.arealist = [{
							cityName: '全部区域',
							cityCode: this.city.id
						},
						...r.data
					]
				})
			},
			getNowCity() {
				let that = this
				uni.getFuzzyLocation({
					success(r) {
						that.location = r;
						that.$http('/api/getCurrentCity', {
							longitude: r.longitude,
							latitude: r.latitude
						}).then(c => {
							that.city = {
								name: c.data.cityName,
								id: c.data.cityCode
							};
							that.getAreas()
							that.getDate()
						})
					},
					fail(r) {
						that.location = uni.getStorageSync('location')
						that.city = uni.getStorageSync('city')
						that.sToast('定位失败，使用默认城市')
						that.getAreas()
						that.getDate()
						uni.hideLoading()
					}
				})
			},
			open(v) {
				if (!uni.getStorageSync('uInfo')) {
					uni.navigateTo({
						url: '/pages/dengLu/dengLu'
					});

				} else {
					uni.navigateTo({
						url: '../dianYingYuan/xiangXi?cinemaId=' + v.cinemaId + '&movieId=' + this.movieId +
							'&name=' + this.name
					})
				}

			},
			// 查询相关电影院
			getCinemasByMovieId() {
				let that = this
				this.loading = true
				let cityCode = this.city.id
				// 如果选择区域,查询区域
				if (this.index != 0) {
					cityCode = this.arealist[this.index].cityCode
				}
				this.$http('/api/getCinemasByMovieId', {
					cityCode,
					movieId: this.movieId,
					showDate: this.date[this.dayIndex].time,
					longitude: this.location.longitude || 0,
					latitude: this.location.latitude || 0,
					phone: this.phone,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keyWords: this.keyWords || ''
				}).then((r) => {

					r.data = r.data.map(v => {
						v.minPrice = parseFloat(v.minPrice)
						v.minPrice.toFixed(2)
						return v
					})
					setTimeout(() => {
						that.loading = false
					}, 500)
					this.list = this.list.concat(r.data)
				})
			},
			setIndex(index) {
				this.dayIndex = index
				this.pageNum = 1
				this.list = []
				this.getCinemasByMovieId()
			},
			// 获取接下来一周
			getDate(day = 10) {

				var date = new Date();

				var base = new Date(date).getTime();

				var oneDay = 24 * 3600 * 1000;

				var date = [];

				var data = [Math.random() * 300];

				var time = new Date(base);

				var weeks = new Array(
					"周日",
					"周一",
					"周二",
					"周三",
					"周四",
					"周五",
					"周六"
				);
				for (var i = 0; i < day; i++) {

					let now = new Date(base + oneDay * i);
					let month = now.getMonth() + 1
					let time = [now.getFullYear(), month > 9 ? month : ('0' + month), now.getDate() > 9 ? now.getDate() : (
						'0' + now.getDate())]
					date.push({
						time: time.join('-'),
						timestr: time[1] + '月' + time[2] + '日',
						week: weeks[now.getDay()]
					});

				}
				console.log(date)
				this.date = date

				this.getCinemasByMovieId()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 180rpx 20rpx 20rpx;
	}

	.tag {
		border: 1rpx solid #666;
		height: 36rpx;
		border-radius: 10rpx;
		padding: 0 14rpx;
	}

	.house {
		padding: 40rpx 30rpx;
		border-radius: 15rpx;
	}

	.picker {
		// padding: 10px 20rpx 10rpx 40rpx;
		padding: 15px 15rpx 10rpx 2rpx;
	}

	.header {
		width: 100%;
		height: 170rpx;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		overflow-x: scroll;
		white-space: nowrap;
		z-index: 2;
		padding-top: 15rpx;
		box-shadow: 0 4rpx 4rpx 4rpx #eee;

		.date-box {
			display: inline-block;
		}

		.active {
			&::after {
				content: '';
				position: absolute;
				width: 40rpx;
				height: 8rpx;
				bottom: -10rpx;
				left: calc(50% - 20rpx);
				background-color: #FF5555;
				border-radius: 4rpx;
			}
		}
	}
</style>